<template>
	<view class="order-detail">
		<view class="color-box">
			<view class="w-center">
				<view class="order-status-t  df df-align-items">
					<text class="iconfont icon-balance" v-if="detail.status !== 2"></text>
					<text class="iconfont icon-quxiao" v-else></text>
					<view class="order-status-t-i" v-if="detail.status == 1">订单已支付</view>
					<view class="order-status-t-i" v-if="detail.status == 0">订单待支付</view>
					<view class="order-status-t-i" v-if="detail.status == 2">订单已取消</view>
				</view>
				<view class="sum-box df df-justify-content-between df-align-items">
					<view class="sum-box-l" v-if="detail.status == 1">
						实付￥{{detail.total}}
					</view>
					<view class="sum-box-l" v-if="detail.status == 0">
						应付￥{{detail.total}}
					</view>
					<view class="sum-box-r">
						{{detail.createtime}}
					</view>
				</view>
				<view class="punch-time-box df df-justify-content-between df-align-items">
					<text class="punch-time">当前时间：</text>
					<text class="punch-time red">{{ clock | FormatTime }}</text>
				
				</view>
			</view>
			<view class="detail-main w-center">
				<view class="order-data">
					<view class="order-data-title">
						订单信息
					</view>
					<view class="data-item df df-justify-content-between">
						<view>订单编号</view>
						<text>{{detail.orderno}}</text>
					</view>
					<view class="data-item df df-justify-content-between">
						<view>下单时间</view>
						<text>{{detail.createtime}}</text>
					</view>
					<view class="data-item df df-justify-content-between">
						<view>油站名称</view>
						<text>{{detail.station_name}}</text>
					</view>
					<view class="data-item df df-justify-content-between">
						<view>地址</view>
						<text>{{detail.adresintro}}</text>
					</view>
				</view>
				<view class="order-data">
					<view class="order-data-title">
						商品信息
					</view>
					<view class="data-item df df-justify-content-between">
						<view>油号/枪号</view>
						<text>{{detail.oil_name}}/{{detail.gun_name}}</text>
					</view>
					<view class="data-item df df-justify-content-between">
						<view>油站价</view>
						<text>￥{{detail.price}}</text>
					</view>
					<view class="data-item df df-justify-content-between">
						<view>支付价</view>
						<text>￥{{detail.p_price}}</text>
					</view>
					<view class="data-item df df-justify-content-between">
						<view>加油升数</view>
						<text>{{detail.num}}升</text>
					</view>
					<view class="data-item df df-justify-content-between">
						<view>加油金额</view>
						<text>￥{{detail.total}}</text>
					</view>
				</view>
				<view class="order-data">
					<view class="order-data-title">
						优惠信息
					</view>
					<view class="data-item df df-justify-content-between">
						<view>加油金优惠</view>
						<text>￥{{detail.deduct_amount}}</text>
					</view>
					<view class="data-item df df-justify-content-between">
						<view>直降优惠</view>
						<text>￥{{detail.discount_amount}}</text>
					</view>
				</view>
				<view class="order-data" v-if="detail.status == 1">
					<view class="order-data-title">
						支付方式
					</view>
					<view class="data-item df df-justify-content-between">
						<view v-if="detail.pay_way == 1">微信支付</view>
						<view v-else-if="detail.pay_way == 2">支付宝支付</view>
						<text>已支付￥{{detail.total}}</text>
					</view>
				</view>
			</view>
			<view class="" style="height: 150rpx;"></view>
		</view>
		<!-- 取消订单 -->
		<!-- <view class="submit-box df df-justify-content-alin" style="z-index: 1000;" v-if="detail.status+'' === '0'">
			<view class="cancel-btn" @click="openInvice" hover-class="btn-hover" @click="cancelOrder()">取消订单</view>
		</view> -->
	</view>
</template>

<script>
	import api from '@/api/order.js'
	export default{
		data(){
			return{
				detail: '',
				 clock: Date.parse(new Date()),
			}
		},
		onLoad(option) {
			if(option.state == 0 || option.state == 1){
				
			}
			this.getDetail(option.id);
			
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
		},
		 mounted() {
		    let _this = this;
		    setInterval(function () {
		      _this.clock = Date.parse(new Date());
		    }, 1000);
		  },

		 filters: {
		    FormatTime: function (val) {
		      return getDate(val, "year");
		    },
		},
		methods:{
			getDetail(id){
				api.getOrderDetail({id}).then(res=>{
					if(res.code == 1){
						this.detail = res.data
					}
				})
			},
			getDate(datetime, startType) {
			  var date = new Date(datetime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			  var year = date.getFullYear(),
			    month = ("0" + (date.getMonth() + 1)).slice(-2),
			    sdate = ("0" + date.getDate()).slice(-2),
			    hour = ("0" + date.getHours()).slice(-2),
			    minute = ("0" + date.getMinutes()).slice(-2),
			    second = ("0" + date.getSeconds()).slice(-2);
			  // 拼接
			  // var result = year + "-"+ month +"-"+ sdate +" "+ hour +":"+ minute +":" + second;
			  // 返回
			  // return result;
			  let resStr = "";
			  if (startType === "year")
			    resStr =
			      year +
			      "-" +
			      month +
			      "-" +
			      sdate +
			      " " +
			      hour +
			      ":" +
			      minute +
			      ":" +
			      second;
			  if (startType === "day") resStr = year + "-" + month + "-" + sdate;
			  if (startType === "month") resStr = month + "-" + sdate;
			  if (startType === "hour") resStr = hour + ":" + minute + ":" + second;
			  return resStr;
			}
			// 订单取消
			// cancelOrder(){
			// 	uni.showModal({
			// 		content: "确认取消订单？",
			// 		success(res) {
			// 			if(res.confirm){
							
			// 			};
			// 		}
			// 	})
			// }
		}
	}

export function getDate(datetime, startType) {
  var date = new Date(datetime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var year = date.getFullYear(),
    month = ("0" + (date.getMonth() + 1)).slice(-2),
    sdate = ("0" + date.getDate()).slice(-2),
    hour = ("0" + date.getHours()).slice(-2),
    minute = ("0" + date.getMinutes()).slice(-2),
    second = ("0" + date.getSeconds()).slice(-2);
  // 拼接
  // var result = year + "-"+ month +"-"+ sdate +" "+ hour +":"+ minute +":" + second;
  // 返回
  // return result;
  let resStr = "";
  if (startType === "year")
    resStr =
      year +
      "-" +
      month +
      "-" +
      sdate +
      " " +
      hour +
      ":" +
      minute +
      ":" +
      second;
  if (startType === "day") resStr = year + "-" + month + "-" + sdate;
  if (startType === "month") resStr = month + "-" + sdate;
  if (startType === "hour") resStr = hour + ":" + minute + ":" + second;
  return resStr;
}

</script>
<style>
	page{
		background: #F5F5F5FF;
	}
</style>
<style lang="scss" scoped>
	.order-detail{
		.color-box{
			width: 100%;
			height: 440rpx;
			background: linear-gradient(180deg, #F12F63 0%, rgba(255,255,255,0) 100%);

			// position: relative;

			.order-status-t{
				padding-top: 40rpx;
				padding-bottom: 36rpx;
				text{
					font-size: 45rpx;
					color: #FFFFFF;
				}
				.order-status-t-i{
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					padding-left: 10rpx;
				}
			}
			.punch-time-box{
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.punch-time{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #313234;
				}
				.red{
					color: red;
				}
			}
			.sum-box{
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				.sum-box-l{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #313234;
				}
				.sum-box-r{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #555555;
				}
			}
			.detail-main{
				margin-top: 40rpx;
				border-radius: 20rpx 20rpx 0 0;
				overflow: hidden;
				margin-bottom: 14rpx;
				.order-data{
					width: 100%;
					min-height: 198rpx;
					// max-height: 444rpx;
					background: #fff;
					margin-bottom: 14rpx;
					.order-data-title{
						padding: 20rpx 0 30rpx 30rpx;
						box-sizing: border-box;
						border-bottom: 1px solid #EEEEEEFF;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #6A6A6A;
						margin-bottom: 32rpx;
					}
					.data-item{
						padding: 0 30rpx 40rpx 30rpx;
						box-sizing: border-box;
						view{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #1E1E20;
						}
						text{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}
			}
		}
		
		.submit-box {
			width: 100%;
			// height: 128rpx;
			bottom: 0;
			background: #fff;
			position: fixed;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		
			.cancel-btn {
				// width: 360rpx;
				width: 100%;
				height: 88rpx;
				background: #F12F63;
				// border-radius: 60rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				
				&.btn-hover{
					background-color: rgba(241, 47, 99, 0.7);
				}
			}
		}
	}
</style>
